/* pages/components/custom-nav-bar/custom-nav-bar.wxss */
@import "../../src/static/style/variable.scss";
// 默认的hover样式
.custom-nav-hover {
  background-color: $navbar-hover-color;
}

// 右下角三角形
.low-right-triangle::after {
  width: 0;
  height: 0;
  content: "";
  position: absolute;
  bottom: 10rpx;
  right: -19rpx;
  border-top: 7rpx solid transparent;
  border-right: 7rpx solid $main-bg-color;
  border-bottom: 7rpx solid $main-bg-color;
  border-left: 7rpx solid transparent;
}
// 导航栏样式
.custom-nav-bar {
  box-sizing: border-box;
  position: sticky;
  top: 0;
  z-index: 10000;
  width: 100%;
  // background-image: $navbar-bg-color;
  background-color: rgba(238, 238, 238, 0.989);
  color: $navbar-title-font-color;
  letter-spacing: 1rpx;
  opacity: 0.9;
  // 状态栏
  .status-bar {
    box-sizing: border-box;
  }
  // 导航栏
  .nav-bar {
    box-sizing: border-box;
    width: 100%;
    @include flex(center, center);
    // 左边的图标
    .left-icon {
      box-sizing: border-box;
      position: absolute;
      left: 2rpx;
      width: 100rpx;
      border-radius: 6rpx;
      @include flex(center, center);
      mp-icon {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      image {
        width: 33rpx;
        height: 34rpx;
      }
    }
    // 中间的内容
    .middle-content {
      position: relative;
      height: 100%;
      min-width: 348rpx;
      @include flex(center, center);
      font-size: $navbar-bg-font-size;
      .triangle {
        position: relative;
        // border: 1rpx solid red;
      }
    }
    // 右边的图标
    .right-icon {
      // border: 1rpx solid rgb(0, 26, 255);
      box-sizing: border-box;
      position: absolute;
      right: 0;
      width: 120rpx;
      height: 90%;
      display: flex;
      justify-content: center;
      align-items: center;
      // margin-left: 39rpx;
      image {
        width: 17rpx;
        height: 28rpx;
      }
    }
  }
}
